<template>
  <el-card
    shadow="always"
    style="margin-bottom: 10px"
    v-loading="loading"
    element-loading-text="分析中..."
  >
    <template #header
      ><el-icon><Promotion /></el-icon>动态解析
    </template>
    <div class="siteHead">
      <SvgIcon class="siteIcon" iconName="icon-dizhi" style="margin-right: 5px"></SvgIcon>
      <span>通联地址分析:</span>
    </div>
    <el-table
      :data="pageTableD"
      border
      stripe
      style="width: 100%; margin-top: 20px"
      id="tableDanger"
    >
      <el-table-column width="220" prop="ip" label="IP地址" />
      <el-table-column prop="url" label="URL" />
      <el-table-column prop="timestamp" label="时间戳" />
    </el-table>
    <el-config-provider :locale="zhCn">
      <el-pagination
        v-model:current-page="currentD"
        :page-size="limitD"
        background
        layout="total,jumper,prev, pager, next"
        :total="totalD2"
        :pager-count="6"
        @size-change="handleSizeChangeD"
        @current-change="handleCurrentChangeD"
      />
    </el-config-provider>

    <div class="keySite">
      <div class="siteHead">
        <SvgIcon class="siteIcon" iconName="icon-iconfinder_connected-globe_4417105" style="margin-right: 5px"></SvgIcon>
        <span>关键诈骗站点:</span><el-switch v-model="parentBorder" />
      </div>
      <el-table :data="proData" :border="parentBorder" style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <div class="detail">
              <h3>相关URL</h3>
<!--                <el-table :data="props.row.urls">-->
<!--                  <el-table-column v-for="item in props.row.urls" :key="item"/>-->
<!--          </el-table>-->
                <ul v-for="item in props.row.urls" :key="item">
                  <li><SvgIcon iconName="icon-url" style="margin-right: 5px"></SvgIcon>{{item}}</li>
                </ul>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="关键域名" prop="keyUrl" />
      </el-table>
    </div>
  </el-card>
</template>

<script setup>
import { Promotion } from "@element-plus/icons-vue";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { useStateStore } from "@/stores/counter.js";
import {dynamicAPI, dynamicAPI1, extractAPI} from "@/apis/anay.js";

const stateStore = useStateStore();
const loading = ref(true);

let tableDataDan2 = ref([]);
const proData = ref([])
const keySite = ref({})
const route = useRoute();
const parentBorder = ref(false)
// 总数
const totalD2 = ref(0);
// 当前页
let currentD = ref(1);
// 每页总数
const limitD = ref(13);
// 当页数据
let pageTableD = ref([]);

let item = ref({})

const loadData =async (filepath) =>{
  const storedTableData2 = sessionStorage.getItem('tableDataDan2');
  const storedProData = sessionStorage.getItem('proData');
  if(storedTableData2 && storedProData){
    tableDataDan2.value = JSON.parse(storedTableData2);
    proData.value = JSON.parse(storedProData)
  }else {
   await fetchData(filepath);
  }
}

const fetchData = async (filepath) =>{
  try{
    const response = await dynamicAPI(filepath);
    tableDataDan2.value = response.data.urls;
    keySite.value = response.data.domain_urls
    for(item in keySite.value){
      let data={'keyUrl':item,urls:keySite.value[item]}
      proData.value.push(data)
    }
    sessionStorage.setItem('tableDataDan2',JSON.stringify(tableDataDan2.value));
    sessionStorage.setItem('proData',JSON.stringify(proData.value));
  }catch (error){
    console.error('Failed to fetch data',error);
  }
}

onMounted(async () => {
  const filepath = route.query.filepath;
  if (filepath) {
    await loadData(filepath)
    loading.value = false;
    totalD2.value = tableDataDan2.value?.length;
    initDataD();
    stateStore.changePer();
    loading.value = false;
  }
});
const initDataD = () => {
  // console.log(tableDataDan.value);
  pageTableD.value = tableDataDan2.value.filter(
    (item, index) =>
      index < currentD.value * limitD.value &&
      index >= limitD.value * (currentD.value - 1)
  );
  // console.log(pageTableD.value)
};

//分页
const handleSizeChangeD = (e) => {
  limitD.value = e;
  initDataD();
};
const handleCurrentChangeD = (e) => {
  currentD.value = e;
  initDataD();
};
</script>

<style scoped>
.detail ul{
  list-style: none;
}
.siteHead{
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.siteIcon{
  width: 50px;
  height: 50px;
}
.detail{
  margin-left: 5px;
}
.keySite{
  margin-top: 25px;
  height: 460px;
  overflow-y: scroll;
}
.siteHead span{
  font-size: 18px;
  font-weight: bold;
  margin-right: 3px;
}
.keySite h3{
  color: #606266;
}
::v-deep .el-card__header {
  font-weight: bold;
  font-size: 20px;
}
.el-table {
  --el-table-text-color: #3f444d;
  --el-table-header-text-color: #13161a;
  font-weight: normal;
  font-size: 15px;
  height: 600px;
}
.el-pagination {
  margin-top: 20px;
  justify-content: center;
}
</style>